/*
    DyBar - Dynamic Toolbar for interactive Web Applications
    
    File:    dybar.css
    Purpose: stylesheet information for all components of DyBar
    Usage:   Place this file next to your webpage and put
             <link rel="stylesheet" type="text/css" href="dybar.css">
             into the <head> section.
  
    Copyright 2007-2008 Christian Kofler <christian.kofler@googlemail.com>

    You may not use this file except under the terms of the accompanying license.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License. You may
    obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

/** Shadow overlay as background for modal elements like dialogs */
#shadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: white;
    opacity: 0.6;
    /*z-index: 100;*/
    /*filter:'alpha(opacity:60)';*/
    visibility: hidden;
}

/** general button appearance */
.toggleOn, .toggleOff, .button, input {
    padding: 5px;
    margin-left: 10px;
    cursor: pointer;
    background-color: #efefef;
}

/** passive buttons (currently not active) */
.toggleOff, .button {
    border-bottom: 2px solid gray;
    border-right: 2px solid gray;
    border-left: 2px solid silver;
    border-top: 2px solid silver;
}

/** enabled elements (e.g. enabled toggle) */
.toggleOn {
    border-top: 2px solid gray;
    border-left: 2px solid gray;
    border-right: 2px solid silver;
    border-bottom: 2px solid silver;
    background-color: #FF8040;
}

/** currently clicked elemets */
.button:active, .toggleOn:active, .toggleOff:active {
    border-top: 2px solid gray;
    border-left: 2px solid gray;
    border-right: 2px solid silver;
    border-bottom: 2px solid silver;
    background-color: red;
}

/* general appearance of the actual dyBar */
.dybarInline, .dybarFloating, .dialog {
    width: 100%;
    height: auto;
    background-color: #dadada;
    padding-top: 10px; /* for custom buttons */
    padding-bottom: 10px; /* for custom buttons */
    margin: 2px; /* have some space around */
}

/* special values for the inlined dyBar version */
.dybarInline {
    position: relative;
    border-bottom: 2px dotted silver;
}

/* special values of the floating dyBar version (not yet implemented) */
.dybarFloating {
    position: absolute;
    top: 10px;
    left: 10px;
}

/** general appearance of a dialog element */
.dialog {
    position: absolute;
    visibility: hidden;         /* initially, all dialogs are hidden */
    height: auto;
    width: auto;
    border: 2px solid gray;
    /*z-index: 101;*/
}

/** the title of a moveable element e.g. a dialog */
.titlebar {
    margin-top: -10px;
    padding: 5px;
    cursor: move;
    width: auto;
    height: 20px;
    background: gray;
    /*border-bottom: 2px dashed silver;*/
    font: 14pt arial;
    font-weight: bold;
    color: white;
}